<template>
  <div class="recommend">
    <hader></hader>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="imgs">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in imgs" :key="index">
            <img :src="item.pic" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 列表 -->
    <div class="swiper-container-list">
      <div class="swiper-wrapper">
        <router-link class="swiper-slide"  to="/daySong" tag="div">
          <div class="img" style=""><span class="iconfont icon-rili
"></span></div>
          <div class="tile">日推</div>
        </router-link>
        <div class="swiper-slide" @click="fm">
          <div class="img"><span class="iconfont icon-tuijiange
"></span></div>
          <div class="tile">私人FM</div>
        </div>
        <router-link class="swiper-slide"   tag="div" to="/srFM?data">
          <div class="img"><span class="iconfont icon-gedan"></span></div>
          <div class="tile">歌单</div>
        </router-link>
        <div class="swiper-slide" @click="goRank">
          <div class="img"><span class="iconfont icon-paixingbang"></span></div>
          <div class="tile">排行榜</div>
        </div>
        <div class="swiper-slide">
          <div class="img"><span class="iconfont icon-zhibo"></span></div>
          <div class="tile">直播</div>
        </div>
        <div class="swiper-slide">
          <div class="img"><span class="iconfont icon-zhuanji"></span></div>
          <div class="tile">数字专辑</div>
        </div>
        <div class="swiper-slide">
          <div class="img"><span class="iconfont icon-shuimian"></span></div>
          <div class="tile">助眠解压</div>
        </div>
        <div class="swiper-slide">
          <div class="img">图片</div>
          <div class="tile">歌房</div>
        </div>
        <div class="swiper-slide">
          <div class="img">图片</div>
          <div class="tile">游戏专区</div>
        </div>
      </div>
    </div>
    <div class="remLists">
      <div class="title">推荐歌单</div>
      <div class="swiper-container02">
        <div class="swiper-wrapper">
          <router-link
            class="swiper-slide"
            v-for="(item, index) in remLists"
            :key="index"
            tag="div"
            :to="'/rankItem?id=' + item.id"
          >
            <div class="img">
              <img :src="item.picUrl" alt="" />
              <span
                ><i class="iconfont icon-erji"></i
                >{{ item.playCount | playCountData }}</span
              >
            </div>
            <p>{{ item.name }}</p>
          </router-link>
        </div>
      </div>
    </div>
    <div class="remLists mv">
      <div class="title">推荐MV</div>
      <div class="swiper-container02">
        <div class="swiper-wrapper">
          <router-link class="swiper-slide" v-for="(item, index) in mv" :key="index" :to="'/mv?id='+item.id" tag="div">
            <div class="img">
              <img :src="item.cover" alt="" />
              <span
                ><i class="iconfont icon-erji"></i
                >{{ item.playCount | playCountData }}</span
              >
            </div>
            <p>{{ item.name }}</p>
          </router-link>
        </div>
      </div>
    </div>
    <div class="swiper-container04">
      <div class="list-harder">
        <div class="title"><van-icon name="replay" />治愈温暖你时光</div>
        <div class="icon" @click="playOne">
          <van-icon name="play" class="play" color="rgb(170,170,170)" />播放
        </div>
      </div>
      <div class="swiper-wrapper">
        <van-cell
          center
          class="swiper-slide"
          v-for="item in newSing"
          :key="item.id"
          :label="item.song.album.artists[0].name"
          @click="setId(item.id)"
          style="background-color: transparent"
        >
          <template #icon>
            <div class="img"><img :src="item.picUrl" alt="" /></div>
          </template>
          <template #title>
            <span class="songName">{{ item.song.album.name }}</span>
          </template>
          <template #right-icon>
            <van-icon name="play" class="play" color="rgb(170,170,170)" />
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>
<script>
import { getBanner, getRemLists, getNewSing, getMV } from "../api/recommend";
import {getFM} from "../api/user"
import "../../node_modules/swiper/dist/css/swiper.min.css";
import "../../node_modules/swiper/dist/js/swiper.min";
import Swiper from "../../node_modules/swiper";
import hader from "../components/hader.vue";
export default {
  components: { hader },
  data: function () {
    return {
      imgs: null,
      remLists: null,
      newSing: null,
      mv: null,
      // show:false
    };
  },
  methods: {
    // 调用父组件方法播放音乐
    setId(id) {
      this.$emit("get-player-id", id);
      //  this.$emit("get-play-all-id",this.$route.query.id);//传递歌单id
    },
    fm(){
      getFM().then(data=>{
        console.log(data.data);
         this.$emit("get-player-id", data.data[0].id);
      })
    },
    goRank(){
      this.$router.push({path:'/rank'})
    },
    playOne(){
        let id=this.newSing[0].id
       this.$emit("get-player-id", id);
    }
  },
  // 过滤器
  filters: {
    playCountData(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(value / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
  created() {
    getBanner().then((data) => {
      this.imgs = data.banners;
    });
    getRemLists().then((data) => {
      console.log(data.result);
      this.remLists = data.result;
    });
    getNewSing().then((data) => {
      console.log(data);
      this.newSing = data.result;
    });
    getMV().then((data) => {
      console.log(data);
      this.mv = data.data;
    });
  },
  mounted() {
    new Swiper(".swiper-container01", {
      slidesPerView: 3,
      paginationClickable: true,
      spaceBetween: 30,
      observer: true,
      observeParents: true,
    });
    new Swiper(".swiper-container02", {
      slidesPerView: 3,
      paginationClickable: true,
      spaceBetween: 10,
      observer: true,
      observeParents: true,
    });
    new Swiper(".swiper-container03", {
      slidesPerView: 5,
      paginationClickable: true,
      spaceBetween: 5,
      observer: true,
      observeParents: true,
    });
    new Swiper(".swiper-container04", {
      slidesPerView: 1,
      slidesPerColumn: 3,
      paginationClickable: true,
      observer: true,
      observeParents: true,
    });
    new Swiper(".swiper-container-list", {
      slidesPerView: 4,
      paginationClickable: true,
      spaceBetween: 10,
       observer: true,
      observeParents: true,
    });
  },
};
</script>
<style lang="less">
.recommend {
  overflow: hidden;
  padding-bottom: 52px;
  // background-color: #ebedf0;
  background-image: linear-gradient(#ebedf0, #fff);
  .list-harder {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
  }
  .swiper-container-list {
    margin-top: 20px;
    text-align: center;
    .img {
      width: 40px;
      height: 40px;
      line-height: 40px;
      margin: auto;
      overflow: hidden;
      border-radius: 50%;
      // background-color: red;
      span{
        font-size: 24px;
        vertical-align: middle;
      }
      img {
        width: 100%;
      }
      i{
        vertical-align: middle;
    font-size: 30px;
    line-height: 50px;
      }
    }
  
    .tile {
      font-size: 14px;
      color: #565658;
    }
  }
}
.banner {
  &::before {
    content: "";
    display: block;
    height: 124px;
    background-color: #d44439;
    position: absolute;
    width: 100%;
    z-index: -1;
  }
  position: relative;
  .imgs {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: auto;
    width: 96%;
    border-radius: 4px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
.remLists {
  padding: 0 15px;
  .title {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
  }
}
.swiper-container02 {
  .img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      position: absolute;
      top: 0;
      right: 0;
      margin: auto;
      color: #fff;
      font-size: 12px;
    }
  }
  p {
    font-size: 12px;
    color: #565658;
    line-height: 15px;
    padding: 5px;
    padding-bottom: 0;
    box-sizing: border-box;
    margin-bottom: 10px;
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
  }
}
.swiper-container03 {
  padding: 15px;
  border-bottom: 1px solid #ccc;
  .img {
    width: 50px;
    height: 55px;
    border-radius: 60px 60px;
    overflow: hidden;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.swiper-container04 {
  .title {
    font-weight: bold;
  }
  .img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .icon {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 1px 8px;
  }
  .songName {
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
}
.remLists.mv {
  .img {
    height: 100px;
  }
}
</style>